<template>
	<view class="bg-white">
		<view class="edgeInsetTop"></view>
		<view :class="'color' + formData.status" class="tips" v-if="formData.status === 0 || formData.status === 1 || formData.status === 2">
			{{msg}}
		</view>
		<view class="padding-lr">
			<form @submit="formSubmit">
				<view class="cu-form-group">
					<view class="title flex align-center"> <text class="margin-right-sm iconfont icon-xingming"></text>
						<text>姓名</text> </view>
					<input :disabled="formData.status === 0 || formData.status === 1" placeholder="请输入姓名" maxlength="32" name="truename" v-model="formData.truename"></input>
				</view>
				
				<view class="cu-form-group">
					<view class="title flex align-center"> <text
							class="margin-right-sm iconfont icon-shenfenzhengrenzheng"></text> <text>身份证号</text> </view>
					<input :disabled="formData.status === 0 || formData.status === 1" type="idcard" placeholder="请输入身份证号" name="idcard" maxlength="18"
						v-model="formData.idcard"></input>
				</view>
				
				
				<view class="cu-form-group flex flex-direction" style="align-items: flex-start;">
					<view class="title flex align-center" style="height: 100rpx;"> <text
							class="margin-right-sm iconfont icon-ziyuan"></text> <text>身份证照片</text> </view>
					<view class="list flex justify-start align-center">
						<image @tap="chooseImg('front_card_image')" v-if="formData.front_card_image" :src="$wanlshop.oss(formData.front_card_image)" mode="aspectFill" class="rightLeftImg item"></image>
						<view v-else class="item flex justify-center align-center" @click="chooseImg('front_card_image')">
							<image :src="$wanlshop.oss('/uploads/staticImage/images/medical/idCard1.png')" mode="widthFix"></image>
						</view>
						
						<image @tap="chooseImg('back_card_image')" v-if="formData.back_card_image" :src="$wanlshop.oss(formData.back_card_image)" mode="aspectFill" class="rightLeftImg item"></image>
						<view v-else class="item flex justify-center align-center" @click="chooseImg('back_card_image')">
							<image :src="$wanlshop.oss('/uploads/staticImage/images/medical/idCard2.png')" mode="widthFix"></image>
							
						</view>
					</view>
				</view>

				<view class="padding-lr-bj flex flex-direction" v-if="formData.status === -1 || formData.status === 2">
					<button form-type="submit" class="round cu-btn bg-green margin-tb lg">{{formData.status == 2 ? '重新提交' : '提交'}}</button>
				</view>
			</form>
				
		</view>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker';
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['user'])
		},
		data() {
			return {
				formData: {
					truename: '', // 真实姓名
					idcard: '', // 身份证号码【限制18位】
					front_card_image: '', // 身份证正面照
					back_card_image: '', // 身份证反面照
					status:-1, // 0：待审核；1：通过；2：拒绝
				},
				msg:''
			}
		},
		onLoad(option) {
			this.loadData()
		},
		methods: {
			async loadData() {
				await uni.request({
					url: '/wanlshop/User/verifiedInfo',
					method: 'POST',
					success: res => {
						if(res.data) {
							this.formData = res.data;
							res.data.status = Number(res.data.status)
							if(res.data.status === 0) {
								this.msg = '您当前正在审核中,请耐心等待'
							} else if(res.data.status === 1) {
								this.msg = '审核已通过'
							} else if(res.data.status === 2) {
								this.msg = `审核未通过原因：${res.data.fail_reason}`
							}
						}
					}
				});
			},
			formSubmit: function(e) {
				if(this.formData.status === 0 || this.formData.status === 1) {
					return this.$wanlshop.msg(this.msg)
				}
				//定义表单规则
				let formData = Object.assign({},this.formData)
				let rule = [
					{name: 'truename',checkType: 'string',checkRule: '2,32',errorMsg: '真实姓名，至少2-32字符'},
					{name: 'idcard',checkType: 'string',checkRule: '18',errorMsg: '请输入18位的身份证号码'},
					{name: 'front_card_image',checkType: 'notnull',errorMsg: '请上传身份证正面照'},
					{name: 'back_card_image',checkType: 'notnull',errorMsg: '请上传身份证反面照'}
				];
				//进行表单检查
				let checkRes = graceChecker.check(formData, rule);
				// ..检查是否注册-没注册跳转注册
				if (checkRes) {
					uni.request({
						url: '/wanlshop/User/verified',
						method: 'POST',
						data: formData,
						success: res => {
							// 提示
							console.log(res)
							this.$wanlshop.msg(res.msg);
							this.loadData()
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			},

			// 选择图片
			chooseImg(name) {
				if(this.formData.status === 0 || this.formData.status === 1) {
					this.previewImage([this.$wanlshop.oss(this.formData[name])],0)
					return false;
				}
				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: "compressed",
					count: 1,
					success: res => {
						// 上传图片
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								uni.uploadFile({
									url: updata.data.uploadurl,
									filePath: res.tempFilePaths[0],
									name: 'file',
									formData: updata.data.storage == 'local' ? null :
										updata.data.multipart,
									success: res => {
										this.formData[name] = JSON.parse(res.data).data.fullurl
									},
									fail: error => {
										this.$wanlshop.msg(JSON.parse(error.data).msg);
									}
								});
							}
						});
					}
				})
			},
			//预览图片
			previewImage(urls,key) {
				uni.previewImage({
					urls: urls,
					current: urls[key],
					indicator: 'number'
				});
			}
		}
	}
</script>

<style lang="less">
	.cu-form-group {
		padding: 0;

		.title {
			min-width: calc(4em + 15px);

			text {
				&:nth-child(1) {
					display: inline-block;
					width: 40rpx;
				}

				&:last-child {
					color: #333333;
					font-size: 28rpx;
					font-weight: normal;
				}
			}
		}

		input {
			text-align: right;
			font-size: 28rpx;
			color: #333333;
		}

		.list {
			width: 100%;
			padding: 0 40rpx 30rpx 40rpx;

			.item {
				width: 286rpx;
				height: 226rpx;
				background-color: #EDEDED;
				border-radius: 6rpx;
				margin-right: 38rpx;

				&:nth-child(2n) {
					margin-right: 0;
				}

				image {
					width: 206rpx;
					height: 103rpx;
				}
			}
		}
	}

	.iconfont {
		color: #777777;
		font-size: 40rpx;
	}

	.switch-sex {
		transform: scale(0.8);
	}
	.textarea {
		width: 100%;
		height: 180rpx;
		textarea {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 10rpx;
		}
	}
	.tips {
		background-color:rgba(255, 0, 0, 0.1);
		padding: 10rpx 0;
		text-align: center;
		color: #f00;
		font-size: 26rpx;
		&.color1 {
			background-color:rgba(76, 189, 102, 0.1);
			color: #4CBD66;
		}
	}
</style>